<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <label>价格最高</label>
            <template v-for="b in book" v-if='b.price==height'>
                <li>书名:{{b.name}}</li>
                <li>作者:{{b.author}}</li>
                <li>分类:{{b.cate}}</li>
                <li>价格:{{b.price|priceFormat}}</li>
            </template>            
        </ul>
        <hr>
        <com1 v-for="(b,i) in book" 
        :bname='b.name' :author='b.author' :cate='b.cate' :id='i+1' :price='b.price'
        @height='maxPrice'
        ></com1>
    </div>
    <script src='vue.js'></script>
    <script type="text/html" id="com1">
        <ul>
            <label>({{id}})</label>
            <li>书名:{{bname}}</li>
            <li>作者:{{author}}</li>
            <li>分类:{{cate}}</li>
            <li :style='price>50?styleList:""'>价格:{{price|priceFormat}}</li>
            <hr>    
        </ul>
    </script>
    <script>
        Vue.filter('priceFormat',function(v){
            return '￥'+v.toFixed(2)
        }) 
        new Vue({
            el:'#app',
            data:{
                height:0,
                book:[
                    {name:'三国演义',author:'罗贯中',cate:'四大名著',price:34},
                    {name:'三国演义',author:'罗贯中',cate:'四大名著',price:50},
                    {name:'三国演义',author:'罗贯中',cate:'四大名著',price:80}
                ]
            },
            methods:{
                maxPrice(e){
                    this.height = e
                }
            },
            components:{
                com1:{
                    template:'#com1',
                    props:['id','bname','author','cate','price'],
                    data:function(){
                        return{
                            styleList:{color:'red'}
                        }
                    },
                    mounted:function(){
                        if(this.price>50){
                            this.$emit('height',this.price)
                        }
                    },
                    
                }
            },
           
        })
    </script>
</body>
</html>